<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
import service from "~/service";
import type { ElForm } from 'element-plus'

type FormInstance = InstanceType<typeof ElForm>
type RegisterInfo = HttpBkhc.RegisterInfo & { confirmPassword?: string }

const formData = reactive<RegisterInfo>({
    userType: 0,
    username: '',
    password: '',
    confirmPassword: '',
    phone: '',
    invitationCode: ''
})

const validateConfirmPassword = (rule: any, value: any, callback: any) => {
    if (value !== formData.password) {
        callback(new Error("确认密码与设置密码不一致"))
    } else {
        callback()
    }
}

const formRules = {
    username: [{
        required: true,
        message: '用户名必填',
        trigger: 'blur',
    },
    {
        min: 6,
        max: 32,
        message: '用户名长度必须是6到32个字符之间',
        trigger: 'blur',
    }],
    password: [{
        required: true,
        message: '密码必填',
        trigger: 'blur',
    },
    {
        pattern: /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{6,32}$/,
        message: '密码长度必须包含数字、大小写英文字母是6到32个字符之间',
        trigger: 'blur',
    }],
    confirmPassword: [{
        required: true,
        message: '确认密码必填',
        trigger: 'blur',
    }, {
        validator: validateConfirmPassword, trigger: 'blur'
    }],
    phone: [{
        required: true,
        message: '手机号码必填',
        trigger: 'blur',
    },
    {
        pattern: /^1[0-9]{10}$/,
        message: '手机号格式不正确',
        trigger: 'blur',
    }],
    invitationCode: [{
        required: true,
        message: '业务邀请码必填',
        trigger: 'blur',
    }]
}
const router = useRouter()
const formRef = ref<FormInstance>()

const handleConfirm = async (formEl?: FormInstance) => {
    if (!formEl) {
        return
    }
    try {
        const result = await formEl.validate();
        if (result) {
            const res = await service.syetem.register(formData)
            if (res.code === 200) {
                ElMessage({
                    message: '注册成功，将跳转到登录页面. . .',
                    type: 'success',
                })
                setTimeout(() => {
                    router.push({
                        path: '/login'
                    })
                }, 2000);
            }
            else if (res.code === 202) {
                ElMessage({
                    message: '对不起！用户名已存在',
                    type: 'error',
                })
            } else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }
        }
    } catch (error) {
    }
}
</script>

<template>
    <div class="full-layout member-register">
        <div class="nav">会员注册</div>
        <div class="box">
            <el-form
                ref="formRef"
                :rules="formRules"
                :model="formData"
                class="form"
                label-width="125px"
                label-position="left"
            >
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="formData.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="formData.password" placeholder="密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="confirmPassword">
                    <el-input v-model="formData.confirmPassword" placeholder="确认密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="formData.phone" placeholder="手机号码"></el-input>
                </el-form-item>
                <el-form-item label="业务员邀请码：" prop="invitationCode">
                    <el-input v-model="formData.invitationCode" placeholder="业务员邀请码(没有此邀请码，请联系业务员)"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="button" @click="handleConfirm(formRef)">确 定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.member-register {
    .box {
        max-width: 1200px;
        margin: 24px auto 0px;
        display: flex;
        justify-content: center;
        .form {
            width: 420px;
            margin-right: 125px;
            --el-text-color-regular: rgba(0, 0, 0, 0.85);
            .button {
                width: 100%;
            }
            :deep(.el-input__inner) {
                height: 34px;
                line-height: 34px;
            }
            :deep(.el-form-item__error) {
                top: -2px;
                left: 100%;
                line-height: 34px;
                width: 34px;
                white-space: nowrap;
                padding-left: 8px;
            }
        }
    }
}
</style>
